<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录会员~花礼网</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/denglu.css">
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

  </head>
  
  <body>
	<div id="dingbu">
		<div id="daohang" class="clearfix">
			<ul class="ue clearfix">
				<li><a href="#"> <span class="tu"></span>收藏花礼网(hua.com)</a></li>
				<li id="weixin"><a href="#"><span class="tu1"></span> 关注微信</a>
					<div id="displ-weixin">
						<img src="image/loginImg/wxguanjia_qrcode.png" width="124" height="124">
						<p>扫码关注<br> 回复"礼物"更多惊喜！</p>
					</div>
				</li>
				<li id="huali"><a href="#"> <span class="tu2"></span>
						花礼网app
				</a>
					<div id="disp-huali">
						<img src="image/loginImg/app_download_qrcode.png" width="124"
							height="124">
						<p>新人专享100元APP礼包</p>
					</div></li>
			</ul>
			<div id="daohang2">
				<ul class="ur clearfix">
					<li><a href="login.jsp" id="moun">你好,&nbsp;&nbsp;请登录</a> <a href="zhuce.jsp">注册</a></li>
					<li id="pipe">|</li>
					<li><a href="#">订单查询</a></li>
					<li id="pipe">|</li>
					<li id="huali2"><a href="#">我的花礼</a></li>
					<li id="pipe">|</li>
					<li class="clearfix" id="kefu">
						<a href="#">客户服务 </a>
						<span class="tu4"></span>
						<div id="disp-kefu">
							<a href="#">在线付款</a>
							<a href="#">帮助中心</a>
							<a href="#">售后服务</a>
							<a href="#">配送范围</a>
							<a href="#">留言反馈</a>
						</div>
					</li>
					<li id="pipe">|</li>
					<li class="clearfix" id="gouwuche">
						<a href="#"> <span class="tu3"></span>购物车 <span>(0)</span></a> 
						<span class="tu5"></span>
						<div id="disp-gouwuche" class="clearfix">
							<div id="gouwu-er" class="clearfix"></div>
						</div>
					</li>
					<li id="pipe">|</li>
					<li id="menu">鲜花礼品网</li>
				</ul>
			</div>
		</div>
	</div>
	<div id="tou" class="clearfix">
		<div style="width: 500px;height: 64px;margin-top: 28px; float: left;">
			<a href="#" id="log"></a>
		</div>
		<div id="sou">
			<input type="text" name="" id="kuang" value="" placeholder="商品关键字" />
			<button type="button" id="select">搜索</button>
		</div>
		<div id="lianxi">
			<span id="ico-phone"> <span id="tu6"></span> 400-889-8188
			</span> <a href="#"
				style="border-top: none;border-right: none;border-bottom: none;border-left: 1px solid rgb(217, 217, 217);border-image: initial;}">
				<span id="tu7"></span> 在线客服
			</a>
		</div>
	</div>
	<section class="login-wrapper">
	<div class="container">
		<div class="login-box">
			<ul class="login-tabs" id="ul_test01">
				<li class="register-byphone active">账号登录</li>
				<li class="register-bymail">微信扫码登录 
				<img class="wxqr" src="image/loginImg/pc_login_qr.png" alt="">
				</li>
			</ul>
			<div id="form1">
				<!-- 手机号-->
				<div id="register-phone"
					class="login-form register-form register-form-tel">
					<div class="tel-box deng-box1">
						<div class="input-box ">
							<span class="icon icon-iphone"></span> <input id="phone"
								name="phone" class="account" type="text" placeholder="请输入手机号" value="" />
						</div>
						<p class="tips"></p>
					</div>
					<!-- 密码-->
					<div class="pwd-box pwd-box1 deng-box1">
						<div class="input-box">
							<span class="icon icon-unlocked"></span> <input
								id="phonePassWord" name="phonePassWord" class="pwd pwd-input"
								type="password" placeholder="请输入密码"  value=""/>
						</div>
						<p class="tips"></p>
					</div>
					<input class="form-btn login-btn deng-box1" id="denglu" type="button" value="登录" />
					<p class="form-tip deng-box1">
						<i class="mini-icon icon-info"></i> 首次登录将自动创建账号
					</p>
					<!-- 扫码微信-->
					<div class="login-form login-form-wx deng-box2">
						<div id="QrCodeBox" class="qrcode-box">
							<div class="qrcode-img">
								<img src="image/loginImg/tempqrpic.jpg" alt="微信扫码">
								<li class="layer-bt"></li>
								<li class="layer-bb"></li>
								<li class="layer-bl"></li>
								<li class="layer-br"></li>
							</div>
							<div class="qrcode-text">
								微信扫码/快速登录 <i class="mini-icon icon-question"></i><br /> <i
									class="pop-tips">关注花礼网微信公众号登录</i>
							</div>
						</div>
					</div>
					<div class="bottom-box">
						<ul class="other-login-ways">
							<li class="login-way login-qq"><a href="#"> <i
									class="icon icon-QQ"></i> <span>QQ</span>
							</a></li>
							<li class="login-way login-ali"><a href="#"> <i
									class="icon icon-zhifubao"></i> <span>支付宝</span>
							</a></li>
							<li class="extra-r"><a href="zhuce.jsp">
									去注册&gt; <i cite="icon icon-arrow-right-active"></i>
							</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	</section>
	<div id="yejiao">
		<a href="#">首页</a> <b>|</b> <a href="#">关于我们</a> <b>|</b> <a href="#">媒体报道</a>
		<b>|</b> <a href="#">联系方式</a> <b>|</b> <a href="#">企业团购</a> <b>|</b> <a
			href="#">花店入驻</a> <b>|</b> <a href="#">友情链接</a> <b>|</b> <a href="#">在线补款</a>
		<b>|</b> <a href="#">为什么选择花礼网</a>
	</div>
	<div id="tibu">
		<div id="ach">
			<img src="image/loginImg/6-5.png">
			<a href="#"><img src="image/loginImg/6-7.jpg"></a>
			<a href="#"><img src="image/loginImg/6-6.jpg"></a>
			<a href="#"><img src="image/loginImg/6-8.gif" style="width: 35px;" height="50px"></a>
		</div>
		<p>
			<a href="#">中国花卉协会会员</a> <a href="#">中国电子商务协会会员</a> ICP经营许可证：
			<a href="#">粤B2-20050744</a> <b>|</b> <a href="#">粤ICP备09171662号</a>
			粤公网安备44030502000373号 Copyright © 2005-2021
		</p>
		<p>
			<a href="#">www.hua.com</a> 花礼网（鲜花礼品网）-永生花专区
		</p>
	</div>
	<script type="text/javascript">
		$(".deng-box1").show();
		$(".deng-box2").hide();
		$("#ul_test01>li").click(function () {
			$("#ul_test01>li").removeClass(" active");
			$(this).addClass(" active");
			let index = $(this).index();
			if(index == 0){
				$(".deng-box1").show();
				$(".deng-box2").hide();
			}else if(index == 1){
				$(".deng-box1").hide();
				$(".deng-box2").show();
			}
		})
		$(function() {
			$("#gouwuche").hover(function() {
				$("#disp-gouwuche").show();
			}, function() {
				$("#disp-gouwuche").hide();
			});
			$("#quan-daohang").hover(function() {
				$("#disp-shangpin").show();
			}, function() {
				$("#disp-shangpin").hide();
			});
		});
		
		$("#phone").blur(function(){
			//alert("输入手机号失去焦点");
			let val = $(this).val();
			if(val.length==0){
				$(this).parent().next().text("手机号不能为空");
			}else{
				$(this).parent().next().text("");
			}
		});
		$("#phonePassWord").blur(function(){
			//lert("输入密码失去焦点");
			let val = $(this).val();
			if(val.length==0){
				$(this).parent().next().text("密码不能为空");
			}else{
				$(this).parent().next().text("");
			}
		});
			
		//点击登录
		$("#denglu").click(function(){
			//获取输入的手机号
			var phone = $("#phone").val();
			//获取输入的密码
			var pwd = $("#phonePassWord").val();
			if(phone!=""&&pwd!=""){
				//使用ajax做验证
				$.post("userlogin.shtml",{"flag":"login","phone":phone,"pwd":pwd},function(result){
					if(result!=""){
						//登录成功 跳转页面
						location.href = result;
					}else{
						$("#phonePassWord").parent().next().text("用户名或密码有误");
					}
				});
			}else{
				alert("请将信息填写完整！！");
			}
		});
	</script>
</body>
</html>
